<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			padding:0;
			margin:0;
		}
		#box{
			width: 500px;
			height: 500px;
			border:2px solid black ;
			margin:50px auto 0;
			padding:10px;
		}
		#box>div{
			width:20%;
			height:20%;
			box-sizing:border-box;
			border:2px solid blue ;
			float:left;
		}
	</style>
</head>
<body>
	<div id="box">
		<div class="a"></div>
		<div class="a"></div>
		<div class="a"></div>
		<div class="a"></div>
		<div class="a"></div>
		<div class="a"></div>
		<div class="a"></div>
		<div class="a"></div>
		<div class="a"></div>
		<div class="a"></div>
		<div class="a"></div>
		<div class="a"></div>
		<div class="a"></div>
		<div class="a"></div>
		<div class="a"></div>
		<div class="a"></div>
		<div class="a"></div>
		<div class="a"></div>
		<div class="a"></div>
		<div class="a"></div>
		<div class="a"></div>
		<div class="a"></div>
		<div class="a"></div>
		<div class="a"></div>
		<div class="a"></div>
	</div>
</body>
</html>
<script>
	// function randomColor(){
	// 	var r = Math.floor(Math.random()*256);
	// 	var g = Math.floor(Math.random()*256);
	// 	var b = Math.floor(Math.random()*256);
	// 	return "rgb(" + r + "," + g + "," + b + ")";
	// }
	// var boxDiv = document.getElementById("box");
	// boxDiv.onclick = function(e){
	// 	if(e.target.className == "a"){
	// 		e.target.style.background = randomColor();
	// 	}
	// };
	function randomColor(){
		var r = Math.floor(Math.random() * 256);
		var g = Math.floor(Math.random() * 256);
		var b = Math.floor(Math.random() * 256);
		return  "rgb(" + r + "," + g + "," + b + ")";
	} 
	var boxDiv = document.getElementById("box");
	      boxDiv.onclick = function(e){
	      	if(e.target.className == "a") {
	      		e.target.style.background = randomColor();
	      	}

	      };
</script>